<template>
    <p :class="{'_class1':_c1,'_class2':_c2,}">第一种方式-单个对象绑定:key _class1指的是style样式_class1</p>
    <p :class="_c3Obj">第二种方式-多个对象绑定:直接写对象</p>
    <p :class="[_c1arr,_c2arr]">第三种方式：数组绑定1</p>
    <p :class="[_c4?'_class1':'',_c4?'_class2 _class3':'']">第四种方式：三元表达式,value指向style样式类名</p>
    <p :class="[{'_class1':_c1},_c4?'_class2 _class3 _class4':'']">第五种方式：数组和对象一起使用</p>
</template>

<script>

export default {
    data(){
        return{
            _c1:true,//控制_class1样式的开关
            _c2:true,
            _c3Obj:{
                '_class1':true,//key要和style样式类名一致
                '_class2':true
            },
            _c1arr:'_class1',//value指向style样式类名
            _c2arr:'_class2',
            _c4:true
        }
    },
}
</script>

<style scoped>
._class1{
    font-size: 30px;
}
._class2{
    color:blue;
}
._class3{
    height: 200px;
    width: 200px;
    background-color: red
}
._class4{
    margin-top: 20px;
}
</style>
